import thin_render from "./thin_render.mjs";
import render_content from "./render_content.mjs";
import viewmode from "./viewmode.mjs";
import render_helper from "./render_helper.mjs";

/**
 * 表单视图项模板渲染函数
 * @param {HTMLElement} container - 容器元素，用于放置渲染后的表单项
 * @param {Object} template - 模板对象，包含表单项的配置信息
 *                           template.click - 点击事件处理函数
 *                           template.event - 其他事件配置
 *                           template.title - 标签文本
 *                           template.insert - 插入模式下的模板
 *                           template.edit - 编辑模式下的模板
 */
export default function formviewitem_template(container, template) {
  // 创建字段元素，使用模板对象的第一个键作为元素标签名
  let field = document.createElement(Object.keys(template)[0]);
  container.appendChild(field);
  // field.style.setProperty("--colspan", template.colspan || 1);

  // 绑定事件处理函数（点击事件和其他自定义事件）
  render_helper(field, {
    click: template.click,
    event: template.event,
    style: template.style,
  });

  // 如果模板中定义了标题，创建并添加label元素
  if (template.title !== undefined) {
    let label = document.createElement("label");
    field.appendChild(label);
    // 设置label的文本内容和title属性
    label.innerText = render_content(label, template.title);
    label.title = render_content(label, template.title);
  }

  // let viewmode = viewmode(field);

  // 根据视图模式渲染不同的内容
  if (template.insert !== undefined && viewmode(field) === "insert") {
    // 插入模式：使用template.insert的内容
    thin_render(field, template.insert);
  } else if (
    template.edit !== undefined &&
    (viewmode(field) === "edit" || viewmode(field) === "insert")
  ) {
    // 编辑模式：使用template.edit的内容
    thin_render(field, template.edit);
  } else {
    // 默认模式：使用模板对象的第一个值
    thin_render(field, Object.values(template)[0]);
  }
}
